<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IFE JavaScript Task 04</title>
    <style>
        #num li{
            list-style: none;
            padding: 3px 6px;
            background: palevioletred;
            display: inline-block;
            color: #fff;
            margin: 0 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="group">
        <!--只能输入数字，小数点也无法输入-->
        <input type="text" id="inputText"  onkeyup="this.value=this.value.replace(/[^\d]/g,'');" >
        <button class="btn" id="leftIn">左侧入</button>
        <button class="btn" id="rightIn">右侧入</button>
        <button class="btn" id="leftOut">左侧出</button>
        <button class="btn" id="rightOut">右侧出</button>
    </div>
    <ul id="num">
    </ul>

    <script>
        window.onload = function () {
            var  num = document.getElementById('num');
            var numli = num.getElementsByTagName('li');
            function init() {
                inputValue = document.getElementById('inputText').value;
                nodeli = document.createElement('li');
                nodetext = document.createTextNode(inputValue);
                nodeli.appendChild(nodetext);
            }
            document.getElementById('rightIn').onclick = function(){
                init();
                if(inputValue == ""){alert('输入框不能为空');
                }else {
                num.appendChild(nodeli);}
            };
            document.getElementById('leftIn').onclick = function(){
                init();
                if(inputValue == ""){alert('输入框不能为空');
                }else {
                num.insertBefore(nodeli,numli[0]);}
            };
            document.getElementById('leftOut').onclick = function () {
                init();
                var firstChild = num.firstElementChild;
                alert(firstChild.innerHTML);
                num.removeChild(firstChild);

            };
            document.getElementById('rightOut').onclick = function () {
                init();
                var lastChild = num.lastElementChild;
                alert(lastChild.innerHTML);
                num.removeChild(lastChild);
            };
            var timer1 = setInterval(function () {
                if(numli.length > 0){
                    for(var i = 0;i < numli.length;i++){
                        numli[i].onclick = function () {
                            this.parentNode.removeChild(this);
                            clearInterval(timer1);
                        };
                    };
                };
            },100)

        }
    </script>
</body>
</html>